<template>
  <div id="app">
    <pages-header
        ref="pageHeader"
        :title="algorithm.name"
        :backUrl="this.$routeProStr + '/algorithm/mall'"
    >
    </pages-header>
    <el-container style="border: 1px solid #eee;max-height: 1000px;">

      <el-container>
        <el-header style="height: auto;">
          <div>
            <span class="top-title">{{ algorithm.name }}</span>
            <span class="labels">
              <el-tag type="success" v-for="(item, index) in algorithm.labels">{{ item }}</el-tag>
            </span>
          </div>
          <div class="top-description">{{ algorithm.description }}</div>
        </el-header>

        <el-main>
          <div class="config-block">
            <el-form ref="form" :label-width="labelWidth" @submit.native.prevent >
              <el-form-item :label="item.field_text + '：'" label-for="title" v-for="(item, index) in algorithm.setting.config">
                <template v-if="item.data_type == 'text'">
                  <el-input :placeholder="'请输入'+item.field_text" v-model="algorithmParam[item.field]"/>
                </template>
                <template v-else-if="item.data_type == 'image'">
                  <div class="pictrueBox" @click="modalPicTap('dan', item.field)">
                    <div class="pictrue" v-if="algorithmParam[item.field]">
                      <img v-lazy="algorithmParam[item.field]" />
                      <el-input v-model="algorithmParam[item.field]" style="display: none"></el-input>
                    </div>
                    <div class="upLoad acea-row row-center-wrapper" v-else>
                      <el-input v-model="algorithmParam[item.field]" style="display: none"></el-input>
                      <i class="el-icon-picture-outline" style="font-size: 24px"></i>
                    </div>
                  </div>
                </template>
                <template v-else-if="item.data_type == 'multi-image'">
                  <div class="acea-row">
                    <div
                        class="pictrue"
                        v-for="(mItem, index) in multiImage"
                        :key="index"
                        draggable="true"
                    >
                      <img v-lazy="mItem" />
                      <i class="el-icon-error btndel" @click="handleRemove(index)"></i>
                    </div>
                    <div
                        v-if="multiImage.length < 10"
                        class="upLoad acea-row row-center-wrapper"
                        @click="modalPicTap('duo', item.field)"
                    >
                      <i class="el-icon-picture-outline" style="font-size: 24px"></i>
                    </div>
                    <el-input v-model="multiImage[0]" style="display: none"></el-input>
                  </div>
                </template>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="startDetection">开始检测</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
      </el-container>
      <el-aside width="430px" style="background-color: rgb(238, 241, 246)">
        <div class="res-title">检测记录</div>
        <el-table :data="algorithmLogList" v-loading="loading" style="height: 100%;">
          <el-table-column prop="add_time" label="日期" width="100">
          </el-table-column>
          <el-table-column prop="detect_res" label="检测结果" width="330">
            <template slot-scope="scope">
              <span v-if="scope.row.detect_res.code === 0 && scope.row.detect_res.data != null">{{ scope.row.detect_res.data }}</span>
              <span v-else-if="scope.row.detect_res.msg != null">{{ scope.row.detect_res.msg }}</span>
              <span v-else>{{ scope.row.detect_res }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-aside>

      <el-dialog :visible.sync="modalPic" width="950px" scrollable title="上传检测测试图" :close-on-click-modal="false">
        <uploadPictures
            :isChoice="isChoice"
            @getPic="getPic"
            @getPicD="getPicD"
            :gridBtn="gridBtn"
            :gridPic="gridPic"
            v-if="modalPic"
        ></uploadPictures>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import moment from "moment";
import {
  algorithmInfoApi,
  algorithmImgCall,
  algorithmLogListApi,
} from '@/api/algorithm';
import uploadPictures from '@/components/uploadPictures';

export default {
  components: {
    uploadPictures,
  },
  data() {
    return {
      loading:false,
      algorithmId: 0,
      algorithm: {
        name: "",
        description: "",
        pre_image: "",
        labels: [],
        setting: {
          config: [],
        },
      },
      multiImage: [],
      selectItemImgParamField: "",
      algorithmParam: {},
      algorithmLogList: [],
      modalPic: false,
      isShowEdit: false,
      isChoice: '',
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      picTit: '',
    };
  },
  created() {
    let id = this.$route.params.id;
    this.algorithmId = id;
    this.algorithmInfo(id);
    this.getAlgorithmLogList(id);
  },
  mounted() {
  },
  watch: {
    calendarDate(val, oldVal) {
      this.currentMonthStr = moment(val).format("YYYY-MM");
    }
  },
  computed: {
    labelWidth() {
      return this.isMobile ? undefined : '80px';
    },
  },
  methods: {
    // 获取算法信息；
    algorithmInfo(id) {
      this.loading = true;
      algorithmInfoApi(id)
          .then((res) => {
            let data = res.data;
            this.algorithm = data;
            this.loading = false;
          })
          .catch((res) => {
            this.loading = false;
            this.$message.error(res.msg);
          });
    },
    getAlgorithmLogList(id) {
      algorithmLogListApi({algorithm_id: id})
          .then((res) => {
            let data = res.data;
            this.algorithmLogList = data.list;
            this.loading = false;
          })
          .catch((res) => {
            this.loading = false;
            this.$message.error(res.msg);
          });
    },
    startDetection() {
      this.loading = true;
      let params = this.algorithmParam;
      algorithmImgCall(this.algorithmId, params)
          .then((res) => {
            let data = res.data;
            this.getAlgorithmLogList(this.algorithmId)
            this.loading = false;
          })
          .catch((res) => {
            this.loading = false;
            this.getAlgorithmLogList(this.algorithmId)
            this.$message.error(res.msg);
          });
    },
    // 点击商品图
    modalPicTap(tit, itemImgParamField) {
      this.modalPic = true;
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.selectItemImgParamField = itemImgParamField;
    },
    // 获取单张图片信息
    getPic(pc) {
      this.$set(this.algorithmParam, this.selectItemImgParamField, pc.att_dir);
      this.modalPic = false;
    },
    // 获取单张图片信息
    getPicD(pc) {
      let selectImg = [];
      pc.map((item) => {
        selectImg.push(item.att_dir);
      });
      this.$set(this.algorithmParam, this.selectItemImgParamField, selectImg);
      this.multiImage = selectImg;
      this.modalPic = false;
    },
    enterLeave() {
      this.isShowEdit = !this.isShowEdit;
    },
    handleRemove(i) {
      this.multiImage.splice(i, 1);
      this.algorithmParam.selectItemImgParamField.splice(i, 1);
    },
  },
};
</script>

<style scoped lang="stylus">
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-header {
  background: linear-gradient(71.88280732623025deg, rgba(104, 32, 204, 1) 11%, rgba(104, 32, 204, 1) 11%, rgba(0, 197, 204, 1) 89%, rgba(0, 197, 204, 1) 89%);
  color: #FFFFFF;
  font-weight: bold;
  padding : 20px;

  .top-title {
    font-size : 23px;
  }
  .labels {
    margin-left: 20px;
    line-height: 30px;
    position: absolute;

    .el-tag {
      margin-right: 15px;
    }
  }
}
.el-main {
  background-color: #FFFFFF;
  border: 1px solid #CBCBCB;
  border-color: var(--prev-border-color-lighter);

  .config-block {
    padding : 10px;
    .config-title {
      font-size: 16px;
      margin-bottom: 20px;
    }
  }
}
.el-aside {
  color: #333;
}
.res-title {
  background-color: var(--prev-color-primary-light-8) !important;
  text-align: center;
  font-size: 15px;
  height: 45px;
  line-height: 45px;
  color: #515a6e;
}
.imgPic {
  width: 80px;
  text-align: center;
  display: block;
  background: #CBCBCB;
  height: 50px;
}

.pictrueBox {
  display: inline-block;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}

.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}
</style>